<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录/注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/login.css?v1.01">


</head>
<body>

<img class="bg" src="../static/img/login/1.jpg" alt="">
<div class="page-container ">

    <form action="" name="registor" class="fade-in ">
        <h1 class="title">登 录</h1>
        <div class="card2 flip-in-ver-right">
            <div>
                <input type="text" name="username" class="username" placeholder="请输入账号" autocomplete="off"/>

            </div>
            <div class="msg"></div>

            <div>
                <input type="password" name="password" class="password" placeholder="请输入密码" oncontextmenu="return false"
                       onpaste="return false"/>
            </div>
            <div class="msg1 msg"></div>
            <button id="submit" type="button">注 册</button>
        </div>
        <div class="card1 flip-in-ver-right">
            <div>
                <input type="text" name="username1" class="username" placeholder="请输入账号" autocomplete="off"/>

            </div>
            <div class="msg2 msg"></div>

            <div>
                <input type="password" name="password1" class="password" placeholder="请输入密码" oncontextmenu="return false"
                       onpaste="return false"/>
            </div>
            <div class="msg3 msg"></div>
            <button id="submit1" type="button" onclick="">登 录</button>
        </div>


        <div id="change" class="change">注 册?</div>
    </form>


</div>


<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/js/config.js"></script>
<script type="text/javascript">

    window.onload = function () {
        var regsit = function () {
            let reg = document.forms['registor'];
            if (reg['username'].value.length < 5) {
                $(".msg").html('账号错误');//jquery写法
                console.log("账号错误");
                return;
            }
            if (reg['password'].value.length < 5) {
                $(".msg").html('');//jquery写法
                document.getElementsByClassName("msg1")[0].innerHTML = '密码错误';//原生写法
                console.log("密码错误");
                return;
            }
            document.getElementsByClassName("msg1")[0].innerHTML = '';
            $.ajax({
                url: '../app/api/register.php',
                method: "post",
                data: {
                    username: reg['username'].value,
                    password: reg['password'].value
                },
                dataType:'json',
                success: function (res) {
                    tips(res.msg);
                    if(res.code==200){
                        change();
                    }
                    console.log("访问成功")

                },
                error: function (e) {
                    console.log("错误")
                }
            })


        }

        var login = function () {
            let reg = document.forms['registor'];
            if (reg['username1'].value.length < 5) {
                $(".msg2").html('账号错误');//jquery写法
                console.log("账号错误");
                return;
            }
            if (reg['password1'].value.length < 5) {
                $(".msg2").html('');//jquery写法
                document.getElementsByClassName("msg3")[0].innerHTML = '密码错误';//原生写法
                console.log("密码错误");
                return;
            }
            document.getElementsByClassName("msg3")[0].innerHTML = '';
            $.ajax({
                url: '../app/api/login.php',
                method: "post",
                data: {
                    username: reg['username1'].value,
                    password: reg['password1'].value
                },
                dataType:"json",
                success: function (res) {
                    console.log("访问成功");
                    tips(res.msg);
                    if(res.code==200){
                        setTimeout(()=>{
                            window.location.href="../index.html";
                        },2000)



                    }

                },
                error: function (e) {
                    console.log("错误")
                }
            })


        };





        document.getElementById("submit").addEventListener('click', regsit);
        document.getElementById("submit1").addEventListener('click', login);
        var isLogin = true;
        var change = function () {
            $(".title").removeClass('tracking-in-expand');
            var title = "";
            if (isLogin) {
                $(".card1").css({'display':'none'});
                $(".card2").css({'display':'block'});
                title = "注 册";
                isLogin = false;
            }
            else {
                $(".card1").css({'display':'block'});
                $(".card2").css({'display':'none'});
                title = "登 录";
                isLogin = true;
            }
            setTimeout(() => {

                $(".title").html(title);
                $(".title").addClass('tracking-in-expand');
            }, 100)


        };
        document.getElementById("change").addEventListener('click', change);


    }


</script>
</body>
</html>